<template>
  <editor-content :editor="editor" />
</template>

<script setup>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'
import Text from '@tiptap/extension-text'
import { useEditor, EditorContent } from '@tiptap/vue-3'

const CustomDocument = Document.extend({
  content: 'taskList',
})

const CustomTaskItem = TaskItem.extend({
  content: 'inline*',
})

const editor = useEditor({
  content: `
  <ul data-type="taskList">
          <li data-type="taskItem" data-checked="true">待办一</li>
          <li data-type="taskItem" data-checked="false">待办二</li>
          <li data-type="taskItem" data-checked="false">待办三</li>
          <li data-type="taskItem" data-checked="false">待办四</li>
          <li data-type="taskItem" data-checked="false">待办五</li>
          <li data-type="taskItem" data-checked="false">待办六</li>
        </ul>
  `,
  extensions: [
        CustomDocument,
        Paragraph,
        Text,
        TaskList,
        CustomTaskItem,
      ],
})
</script>

<style lang="scss">
ul[data-type="taskList"] {
  list-style: none;
  padding: 0;

  li {
    display: flex;
    align-items: center;

    > label {
      flex: 0 0 auto;
      margin-right: 0.5rem;
      user-select: none;
    }

    > div {
      flex: 1 1 auto;
    }
  }

  input[type="checkbox"] {
    cursor: pointer;
  }
}
</style>
